<template>
    <div class="tree-picker">
        <Row>
            <Col span="11">
            <div class="picker-box">
                <div class="picker-header">
                    可用权限
                </div>
                <SearchInput></SearchInput>
                <div class="picker-body">
                    <Tree :data="listData" show-checkbox visbile-key="list_show">
                    </Tree>
                </div>
            </div>
            </Col>
            <Col span="2" class="center-container">
            <Button icon="chevron-left" type="primary" size="small" @click="changeItem(false)"></Button>
            <Button icon="chevron-right" type="primary" size="small" @click="changeItem(true)"></Button>
            </Col>
            <Col span="11">
            <div class="picker-box">
                <div class="picker-header">
                    已选权限
                </div>
                <SearchInput></SearchInput>
                <div class="picker-body">
                    <Tree :data="selectData" show-checkbox visbile-key="select_show" :visbile-reverse="true">
                    </Tree>
                </div>
            </div>
            </Col>
        </Row>
    </div>
</template>
<script>
import Tree from '@/element/tree/index'
import SearchInput from '@/element/searchInput'
export default {
    data() {
        return {
            listData: [],
            selectData: [],
            treeData: [{
                expand: true,
                title: 'parent 1',
                children: [{
                    title: 'parent 1-0',
                    expand: true,
                    disabled: true,
                    children: [{
                        title: 'leaf1',
                        disableCheckbox: true
                    }, {
                        title: 'show false',
                        show: false
                    }]
                }, {
                    title: 'parent 1-1',
                    expand: true,
                    checked: true,
                    children: [{
                        title: 'haha'
                    }]
                }]
            }]
        }
    },
    methods: {
        //将json结构转化为tree结构
        treeFormat(data) {
            var tree = {}
            return tree
        },
        //将tree结构转化为json结构
        treeParse(tree) {
            var data = {}
            return data
        },
        changeItem(dir) {

        }
    },
    components: {
        Tree,
        SearchInput
    }
}
</script>
<style lang="less">
.tree-picker {
    height: 100%;
    >.ivu-row {
        height: 100%;
        >.ivu-col {
            height: 100%;
        }
    }
    .center-container {
        .ivu-btn {
            margin: 8px 0;
        }
    }
    .picker-box {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 0;
        margin: 0;
        border-radius: 4px;
        .search-input {
            float: none;
            width: 100%;
            margin: 0;
            padding: 0;
            margin-top: -1px;
            .ivu-input {
                border-radius: 0;
            }
            .ivu-input-group-append {
                border-radius: 0;
            }
        }
        .picker-header {
            padding: 8px 16px;
            background: #f1f1f1;
            border: 1px solid #e9eaec;
        }
        .picker-content {}
        .picker-body {
            height: 100%;
            overflow: auto;
            padding: 8px 32px;
            border: 1px solid #e9eaec;
        }
    }
}
</style>
